<template>
  <div class="box content-box">
    <div ref="canvas" class="editor"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import Modeler from "bpmn-js/lib/Modeler";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-js.css";
const canvas = ref();
onMounted(() => {
  //初始化 modeler 编辑器
  const modeler = new Modeler({ container: canvas.value });
  //加上这一句,否则无法添加节点元素
  modeler.createDiagram();
});
</script>
<style scoped>
.editor {
  width: 100%;
  height: 100%;
}
</style>
